import React, { useState } from "react";
import { Tabs } from "antd";
import type { TabsProps } from "antd";
import style from "./picture.module.css";
import imgtu from "./imgtu.ts";
import { useDispatch } from "react-redux";
import { ADDItem } from "../../../store/module/listSlice.ts";

function Index() {
  const [activeKey, setAciveKey] = useState("1");
  const onChange = (key: string) => {
    setAciveKey(key);
    console.log(key);
  };

  const dispatch = useDispatch()
  
  const dragstart = (value: any, type: any) => {
    // console.log(value);
    dispatch(ADDItem({ value: value, type }))
  }

  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "推荐图片",
      children:
        activeKey === "1" ? (
          <div className={style.imgbox}>
            <button className={style.button1}>科技</button>
            <button className={style.button2}>商务</button>
            <button className={style.button3}>美食</button>
            <button className={style.button4}>教育</button>
            <div className={style.imageContainer}>
              {imgtu.map((category) => (
                <div key={category.id}>
                  <p>{category.title}</p>
                  {category.children.imgs.map((img, index) => (
                    <img
                      key={index}
                      src={img}
                      alt={`${category.title} image ${index + 1}`}
                      className={style.image}
                      draggable
                      data-index={index}  // 存储当前项目的索引
                      onDragStart={() => dragstart(img, 'Dimg')}
                    />
                  ))}
                </div>
              ))}
            </div>
          </div>
        ) : null,
    },
    {
      key: "2",
      label: "我的收藏",
      children:
        activeKey === "2" ? (
          <div className={style.img}>
            {/* <img src={Batchdesignimages1} alt="" /> */}
            <p>暂无内容</p>
            <h6>
              点击图片上<img src=""></img>的进行收藏
            </h6>
          </div>
        ) : (
          "暂无内容"
        ),
    },
    {
      key: "3",
      label: "我的购买",
      children:
        activeKey === "3" ? (
          <div className={style.img}>
            {/* <img src={Batchdesignimages1} alt="" /> */}
            <p>暂无内容</p>
            <h6>购买后的图片会显示在这里</h6>
          </div>
        ) : (
          "暂无内容"
        ),
    },
  ];

  return (
    <div>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </div>
  );
}

export default Index;
